<template>
  <div class="lawyer-edit" :class="{ 'isPc': fun.isPc() }">
    <c-title :hide="false" :text="'律师管理'"></c-title>
    <van-field v-model="fictitious" autosize label="虚拟咨询次数" type="number" placeholder="请输入咨询次数" input-align="right" />
    <div class="status">
      <span>接听状态</span>
      <van-radio-group v-model="status" direction="horizontal">
        <van-radio :name="1">正常</van-radio>
        <van-radio :name="0">休息</van-radio>
      </van-radio-group>
    </div>

    <div class="main" v-for="item in list" :key="item.id">
      <div class="title">{{ item.title }}</div>
      <van-cell-group>
        <van-field v-model="item.amount" type="number"  input-align="right" label="电话咨询"
          ><template #extra>
            <span>元</span>
          </template></van-field
        >
        <van-field v-model="item.online"  input-align="right" type="number" label="在线咨询" >
          <template #extra>
            <span>元</span>
          </template></van-field
        >
        <van-field v-model="item.day"  input-align="right" type="number" label="有效期" >
          <template #extra>
            <span>天</span>
          </template></van-field
        >
      </van-cell-group>
    </div>
    <div class="btn" :style="fun.isPc()?'width:375px':'width:100%'">
      <van-button color="#daa032" @click="submit">提交</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fictitious: "",
      status: 0,
      mobile: "",
      online: "",
      id: "",
      list: []
    };
  },
  activated() {
    this.id = this.$route.params.id;
    this.getData();
  },
  mounted() {},
  methods: {
    submit() {
      let _arr = [];
      this.list.forEach(item => {
        _arr.push({
          "category_id":item.id,
          "tel_content":{
            "amount":item.amount
          },
          "line_content":{
            "amount":item.online,
            "day":item.day
          }
        })
      })
      let json = {
        id: this.id,
        form: {
          fictitious: this.fictitious,
          status: this.status,
          data: _arr
        }
      };
      $http.post("plugin.lawyer-platform.frontend.controllers.lawyer.serviceSave",json).then(res => {
        if(res.result == 1){
          this.$toast(res.msg)
          this.$router.go(-1);
        }else{
          this.$toast(res.msg)
        }
      });
    },
    getData() {
      $http.get("plugin.lawyer-platform.frontend.controllers.lawyer.serviceShow", { id: this.id }).then(res => {
        if (res.result == 1) {
          let category_data =  res.data.lawyer.category_data;
          category_data.forEach(item => {
            item.amount = "";
            item.online = "";
            item.day = "";
          });
          this.fictitious=res.data.lawyer.fictitious;
          this.status=res.data.lawyer.status;
          this.list = res.data.lawyer.category_data;
          console.log(this.list)
          if(res.data.lawyer.service!==null){
            let _data = res.data.lawyer.service.data;
            let Ids = [];
            let _arr = []
              category_data.forEach((item,index) => {
                Ids.push(item.id);
            })
            _data.forEach(item=>{
                if(Ids.includes(item.category_id)){
                    _arr.push({
                      id:item.category_id,
                      amount:item.tel_content.amount,
                      online:item.line_content.amount,
                      day:item.line_content.day
                    })
                }
            })
            _arr.forEach(item => {
                this.list.forEach(item2 => {
                  if(item.id == item2.id){
                     item2.amount = item.amount;
                    item2.online = item.online;
                    item2.day = item.day;
                  }
                })
            })
          }

        }
      });
   }
  }
};
</script>

<style lang="scss" scoped>
.lawyer-edit {
  position: relative;
  background: #fff;
  padding-bottom: 10rem;
}

.isPc {
  max-width: 375px;
}

.btn {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -2px 7px 0 rgba(213, 213, 213, 0.59);
  padding: 0.5714rem 1.7857rem;

  ::v-deep .van-button--normal {
    width: 100%;
    border-radius: 0.3571rem;
  }
}

.title {
  text-align: left;
  background-color: #fff;
  padding-left: 1rem;
  padding-top: 2rem;
  padding-bottom: 1rem;
}

.status {
  display: flex;
  justify-content: space-between;
  align-content: center;
  background-color: #fff;
  padding: 1rem 1rem 0;
}

.lawyer-edit {
  padding-bottom: 5rem;
}
</style>
